<style lang="less" scoped>

</style>
<template>
  <el-card>
    <el-row>
      <el-col :span="24">
        <el-form label-width="80px" :inline="true" :model="queryForm" style="margin-top:  5px;" size="mini">
          <el-row>
            <el-col :span="24">
              <el-form-item label="项目归属">
                <el-select v-model="queryForm.projectid" placeholder="请选择" @change="selectProject"
                           style="width: 150px;">
                  <el-option
                    v-for="item in projectOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="查询类别">
                <el-select v-model="queryForm.type" multiple placeholder="请选择" style="width: 222px;">
                  <el-option
                    v-for="item in typeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="findeTable" icon="el-icon-search"></el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="reset" icon="el-icon-refresh-left"></el-button>
              </el-form-item>
              <el-form-item>
              <excelDownLoad @downLoadAll="downLoadAll" @downLoadQuery="downLoadQuery"></excelDownLoad>
              </el-form-item>

            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <el-button type="info" plain @click="updateProjectRemark" size="mini" icon="el-icon-suitcase">更新项目备注
        </el-button>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="8" style="margin-top:  5px">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入项目备注内容"
          v-model="projectRemark">
        </el-input>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <el-table stripe :data="tableData" style="width: 100%" size="mini">

          <el-table-column prop="pname" label="所属项目" min-width="90" fixed="left"></el-table-column>
          <el-table-column prop="fcode" label="风机编号" min-width="90" fixed="left"></el-table-column>



          <el-table-column prop="yjqnjsj" label="预期全年检时间" min-width="110"></el-table-column>
          <el-table-column prop="qnjyqsj" label="逾期天数(全)" min-width="110">
            <template slot-scope="scope">
                <span style="color: green" v-if="scope.row.qnjyqsj == '未逾期'  || scope.row.qnjyqsj == '-'   ">{{scope.row.qnjyqsj}}</span>
                <span style="color:red;" v-if="scope.row.qnjyqsj != '未逾期'  && scope.row.qnjyqsj != '-'   ">{{scope.row.qnjyqsj}}天</span>
            </template>
          </el-table-column>


          <el-table-column prop="yjbnjsj" label="预期半年检时间" min-width="110"></el-table-column>
          <el-table-column prop="bnjyqsj" label="逾期天数(半)" min-width="110">
            <template slot-scope="scope">
              <span style="color: green" v-if="scope.row.bnjyqsj == '未逾期'  || scope.row.bnjyqsj == '-'   ">{{scope.row.bnjyqsj}}</span>
              <span style="color:red;" v-if="scope.row.bnjyqsj != '未逾期'  && scope.row.bnjyqsj != '-'   ">{{scope.row.bnjyqsj}}天</span>
            </template>
          </el-table-column>


          <el-table-column prop="yjxjsj" label="预期巡检时间" min-width="110"></el-table-column>
          <el-table-column prop="xjyqsj" label="逾期天数(巡)" min-width="110">
            <template slot-scope="scope">
              <span style="color: green" v-if="scope.row.xjyqsj == '未逾期'  || scope.row.xjyqsj == '-'   ">{{scope.row.xjyqsj}}</span>
              <span style="color:red;" v-if="scope.row.xjyqsj != '未逾期'  && scope.row.xjyqsj != '-'   ">{{scope.row.xjyqsj}}天</span>
            </template>
          </el-table-column>



        </el-table>


      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="float: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 25, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>


  </el-card>
</template>

<script>

import {request} from 'network/request.js'
import excelDownLoad from "components/excelDownLoad/excelDownLoad";

export default {
  name: "yjyqFans",
  components:{
    excelDownLoad
  },
  data() {
    return {

      projectOption: [],
      typeOption: [{
        value: '0',
        label: '全年检'
      }, {
        value: '1',
        label: '半年检'
      }, {
        value: '2',
        label: '巡检'
      }],
      queryForm: {
        projectid: '',//项目ID
        type: '',//查询类型（全/半/巡检）
      },
      tableData: [],
      //项目备注
      projectRemark: '',
      //一页显示多少条数
      pageSize: 10,
      //但当前页数
      currentPage: 1,
      //总页数
      total: 0,
    }
  },
  created() {
    this.init()
  },
  mounted() {
  },
  methods: {

    async init() {
      await this.initSelectProject()
      await this.selectProject()
    },

    initSelectProject() {
      let self = this
      return new Promise(function (resolve, reject) {
        request({url:'/project/initSelectProject'}).then(res => {
          self.projectOption = res.data.data
          self.queryForm.projectid = self.projectOption[0].value
          resolve()
        })
      })
    },

    //查询项目备注
    queryProjectRemark() {
      let self = this
      return new Promise(function (resolve, reject) {

        let param = {
          pid: self.queryForm.projectid
        }
        request({url:'/project/queryProjectRemark',data:param}).then(res => {
          self.projectRemark = res.data.data.remark
          resolve()
        })
      })
    },

    findeTable() {
      let self = this
      return new Promise(function (resolve, reject) {
        let type
        if(self.queryForm.type != '' && self.queryForm.type != null){
         type = self.queryForm.type.join(',')
        }
        let param = {
          pageSize: self.pageSize,
          currentPage: self.currentPage,
          type:type,
          projectid:self.queryForm.projectid
        }
        request({url:'/fan/yjyqFans',data:param}).then(res => {
          self.tableData = []
          self.total = 0
          self.total = res.data.data.count
          self.tableData = res.data.data.data
          console.log(res.data.data.data)
          resolve()
        })
      })
    },
    async selectProject() {
      //每次重新选择项目时候  应该重置当前页  否则会造成数据无法查询到
      this.currentPage =1
      await this.findeTable()
      await this.queryProjectRemark()
    },

    //重置查询
    reset() {
      Object.keys(this.queryForm).forEach(key => (this.queryForm[key] = ""))
      this.queryForm.projectid = this.projectOption[0].value
    },
    //更新项目备注
    updateProjectRemark() {
      let self = this
      if (this.queryForm.projectid === '') {
        self.$message.error('请选择项目')
        return false
      }
      let param = {
        pid: this.queryForm.projectid,
        remark: this.projectRemark
      }
      request({url:'/project/updateProjectRemark',data:param}).then(res => {
        if (res.data.stateCode == '200') {
          self.$message.success(res.data.msg)
          self.queryProjectRemark()
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.findeTable()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.findeTable()
    },

    //文件下载组件的发射事件
    downLoadAll() {
      let data = {
        projectid: this.queryForm.projectid
      }
      this.downLoadFile(data)
    },
    downLoadQuery() {
      let data = {
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      }
      Object.assign(data, this.queryForm);
      this.downLoadFile(data)
    },
    downLoadFile(data) {
      let self = this
      let param = data
      request({
        url: '/excel/downLoadYjyqFans',
        data: param,
        blob: 'blob'
      }).then(res => {
        if('application/json' == res.data.type){
          self.$message.error('下载失败')
        }else{
          self.$message.success('下载成功')
          let blob = res.data
          let reader = new FileReader()
          reader.readAsDataURL(blob)
          reader.onload = (e) => {
            let a = document.createElement('a')
            a.download = res.headers.filename
            a.href = e.target.result
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
          }
        }
      })
    },
  },
}
</script>

